<template>
    <div>
        <div class="search-box">
        <div class="search">
            <div class="icon iconfont icon-arrow-left-bold" @click="$router.go(-1)"></div>
            <input type="text" placeholder="搜索歌曲、歌手" autofocus v-model="searchWord" @keyup.enter="search">
            <div class="iconfont icon-cuo cuo" v-show="!flag" @click="change"></div>
        </div>
        <div class="recommend-content" v-show="flag">
            <!-- 热门搜索 -->
            <div class="hot-search">
                <div class="hot-search-title">热门搜索</div>
                <div class="hot-search-content">
                    <ul>
                        <li v-for="(item,index) in searchHotWords" v-show="index < 8" :key="index" @click="historySearch(item.searchWord)">{{item.searchWord}}</li>
                    </ul>
                </div>
            </div>
            <!-- 搜索历史 -->
            <div class="history-search">
                <div class="history-search-title">
                    <span>搜索历史</span>
                    <span class="icon iconfont icon-ashbin" @click="delAll"></span>
                </div>
                <div class="history-search-content">
                    <ul>
                        <li v-show="history" v-for="(item,index) in history" :key="index" @click="historySearch(item)">
                            <span>{{item}}</span>
                            <span class="icon iconfont icon-cuo" @click.stop="del(index)"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- 搜索结果 -->
        <div class="search-result" v-show="!flag">
            <div class="search-result-title">最佳匹配</div>
            <div class="search-result-content">
                <!-- 头部歌手与歌单 -->
                    <ul class="top">
                        <!-- 歌手 -->
                        <li v-if="searchResult.artist" @click="gotosingerList(searchResult.artist[0].id,searchResult.artist[0].picUrl,searchResult.artist[0].name)">
                            <div class="img"><img :src="searchResult.artist[0].picUrl"></div>
                            <div class="singer-name">歌手:{{searchResult.artist[0].name}}</div>
                        </li>
                        <!-- 歌单 -->
                        <li v-if="searchResult.album">
                            <div class="img"><img :src="searchResult.album[0].picUrl"></div>
                            <div class="singer-name">专辑:{{searchResult.album[0].name}}</div>
                        </li>
                    </ul>
                <!-- 底部歌曲 -->
                <ul class="bottom">
                    <li  v-for="(item,index) in songsResult" :key="index" @click="setId(item.id)">
                        <div class="song-name">{{item.name}}</div>
                        <div class="singer-name">{{item.artists[0].name}}</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    import {getSearchHotDetail,getSearchMultimatch,getSearchKeywords} from '../../api/search'
    export default {
        name:'search',
        data() {
            return {
                flag:true,//控制显示与隐藏
                searchHotWords:[],//热门搜索关键词
                history:[],//搜索历史
                searchWord:'',//input的value值，搜索的关键词
                searchResult:[],//搜索结果简略
                songsResult:[],//结果很多条
                // 是否添加到历史
                isAdd:true
            }
        },
        methods: {
            gotosingerList(id,picUrl,name){
                this.$router.push({
                    path:'/singer/singerList',
                    query:{
                        id,
                        picUrl,
                        name
                    }
                })
            },
            setId(id){
                this.$emit('get-player-id',id)
            },
            publicSearch(){
                this.flag = false;
                this.isAdd = this.history.every(item=>item!=this.searchWord)
                if(this.isAdd){
                    this.history.push(this.searchWord)
                }
                // 简略 歌手 歌单
                getSearchMultimatch({keywords:this.searchWord}).then(data=>{
                    this.searchResult = data.result
                    console.log(data.result);
                })
                // 详细 单曲
                getSearchKeywords({keywords:this.searchWord}).then(data=>{
                    this.songsResult = data.result.songs
                })
                this.searchWord="";
            },
            // 搜索功能
            search(){
                this.publicSearch();
            },
            // 请求推荐关键词接口数据
            getSearchHotDetailFun(){
                getSearchHotDetail().then(data=>{
                    this.searchHotWords = data.data
                })
            },
            // 头部cuo icon切换功能
            change(){
                this.searchWord = '';
                this.flag = true;
            },
            // 删除历史记录
            del(index){
                this.history.splice(index,1)
            },
            // 删除全部历史记录
            delAll(){
                this.history = [];
            },
            // 历史搜索
            historySearch(item){
                this.searchWord = item;
                this.publicSearch();
            }

        },
        created(){
            this.getSearchHotDetailFun();
        }
    }
</script>
<style lang="less" >
.search-box{
    min-width: 320px;
    max-width: 750px;
    height: 667px;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;
    background-color: #f2f3f4;
    .search{
        width: 100%;
        height: 40px;
        background-color: #d4473c;
        display: flex;
        align-items: center;
        .icon{
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
        .cuo{
            font-size: 18px;
            color: white;
            margin-left: 8px;
        }
        input{
            margin: 0;
            padding: 0;
            border: none;
            outline: none;
            width: 300px;
            height: 20px;
            background-color: #d4473c;
            color: white;
            &::-webkit-input-placeholder{
                color: rgba(255, 255, 255, 0.5);
            }
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);;
        }
    }
    .recommend-content{
        width: 100%;
        // 热门搜索
        .hot-search{
            width: 89%;
            margin: 0 auto;
        }
        .hot-search-title{
            width: 100%;
            margin: 20px 0 12px;
            color: #838485;
            font-size: 12px;
        }
        .hot-search-content{
            width: 100%;
            ul{
                width: 100%;
                &::after{
                    content: "";
                    display: block;
                    clear: both;
                }
                li{
                    float: left;
                    font-size: 13px;
                    color: #555;
                    padding:4px 3px;
                    border: 1px solid #cccccc;
                    border-radius: 8px;
                    margin-bottom: 7px;
                    margin-right: 7px;
                    
                }
            }
        }
        .history-search{
            width: 89%;
            margin: 0 auto;
            .history-search-title{
                width: 100%;
                margin: 20px 0;
                color: #838485;
                font-size: 12px;
                .icon{
                    float: right;
                }
            }
            .history-search-content{
                width: 100%;
                ul{
                    width: 100%;
                    li{
                        width: 100%;
                        margin: 18px 0;
                        font-size: 13px;
                        color: #333;
                        .icon{
                            float: right;
                        }
                    }
                }
            }
        }
    }
    // 搜索结果
    .search-result{
        width: 100%;
        .search-result-title{
            font-size: 12px;
            color: #d74b42;
            padding: 10px 18px;
        }
        .search-result-content{
            width: 100%;
            .top{
                width: 100%;
                li{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #e6e7e7;
                    .img{
                        width: 45px;
                        height: 45px;
                        margin: 6px 12px 6px 18px;
                        background-color: rosybrown;
                        position: relative;
                        img{
                            width: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: auto;
                        }
                    }
                    .singer-name{
                        width: 270px;
                        color: #333;
                        font-size: 14px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
            .bottom{
                width: 100%;
                li{
                    height: 49px;
                    width: 100%;
                    border: 1px solid #e6e7e7;
                    .song-name{
                        width: 330px;
                        font-size: 14px;
                        color: #333;
                        margin: 10px 0 0 18px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .singer-name{
                        width: 330px;
                        font-size: 12px;
                        color: #aaa;
                        margin-left: 18px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
}
</style>